<template>
  <view class="container">
    <view class="house-item-wrap">
      <view class="house-item" v-for="item in historical_contracts" @click="handleClickRouter" :data-url="`/rentalHousing/rental_information?item=${JSON.stringify(
          item
        )}&bName=${bName}&roomName=${roomName}&type=历史`">
        <view class="time-style">
          <view class="left">
            <u-icon name="calendar" color="#A2A2A2"></u-icon>
            <text>{{ item.createTime }}</text>
          </view>
          <view class="right">
            <u-icon name="arrow-right" color="#A2A2A2"></u-icon>
          </view>
        </view>

        <view class="info-row">
          <view class="label">出租人员:</view>
          <view class="value">{{ item.hostName }}</view>
        </view>

        <view class="info-row">
          <view class="label">承租人员:</view>
          <view class="value">{{ item.name.join("、") }}</view>
        </view>

        <view class="info-row">
          <view class="label">租房时间:</view>
          <view class="value">{{ item.beginTime.split(" ")[0] }} -
            {{ item.endTime.split(" ")[0] }}
          </view>
        </view>
      </view>
    </view>
    <yy-watermark></yy-watermark>
  </view>
</template>

<script>
  import {
    getAction
  } from "@/utils/request.js";
  import {
    handleClickRouter
  } from "@/utils/util.js";
  export default {
    data() {
      return {
        fHouseid: "",
        bName: "",
        roomName: "",
        historical_contracts: [],
      };
    },
    onLoad(options) {
      this.fHouseid = options.fHouseid;
      this.bName = options.bName;
      this.roomName = options.roomName;
      this.get_historical_contracts();
    },
    onShow() {},
    methods: {
      handleClickRouter,
      async get_historical_contracts() {
        const {
          result
        } = await getAction("/rentinghouse/historicalContracts", {
          id: this.fHouseid,
          pageNo: 1,
          pageSize: 99999,
        });

        this.historical_contracts = result.records;
      },
    },
  };
</script>

<style scoped lang="scss">
  .container {
    height: 100%;
    background: #f9f9f9;
    padding: 0 19rpx;
    position: relative;
    display: flex;
    flex-direction: column;

    .house-item-wrap {
      flex: 1;
      overflow: scroll;

      .house-item {
        //   width: 680rpx;
        height: 280rpx;
        background: #fff;
        border-radius: 16rpx 16rpx 16rpx 16rpx;
        border: 1rpx solid #eceaea;

        margin: 10rpx 0;
        padding: 22rpx 26rpx;

        display: flex;
        flex-direction: column;
        justify-content: space-between;

        .time-style {
          display: flex;
          align-items: center;
          justify-content: space-between;
          border-bottom: 1rpx solid #eceaea;
          font-weight: bold;
          font-size: 30rpx;
          color: #000000;
          padding-bottom: 18rpx;

          .left {
            display: flex;
            align-items: center;
            justify-content: space-between;

            text {
              margin-left: 15rpx;
            }
          }
        }

        .info-row {
          display: flex;
          align-items: center;

          .label {
            min-width: 120rpx;
            font-weight: 400;
            font-size: 26rpx;
            color: #a2a0a0;
          }

          .value {
            font-weight: 400;
            font-size: 26rpx;
            color: #6b6b6b;
            margin-left: 15rpx;
          }
        }
      }
    }
  }
</style>